<template>
	<view class="ccp">
		<view class="ccpMain">
			<view class="ccpMainLi">
				<view class="ccpMainLiTitle">
					原密码
				</view>
				<input v-if="type_old == 'text'" v-model="oldPassword" class="ccpMainLiInput" type="text" placeholder-class="inputplace" placeholder="请输入原密码" value="" />
				<input v-else v-model="oldPassword" class="ccpMainLiInput" type="password" placeholder-class="inputplace" placeholder="请输入原密码" value="" />
				<view class="ccpMainLiRight" @click="cli_look_old">
					<image v-if="type_old == 'password'" class="ccpMainLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/login-4.png" mode=""></image>
					<image v-else class="ccpMainLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/login-3.png" mode=""></image>
				</view>
			</view>
			<view class="ccpMainLi" style="margin-bottom: 0;">
				<view class="ccpMainLiNew">
					<view class="ccpMainLiTitle">
						新密码
					</view>
					<input v-if="type_new == 'text'" v-model="newPassword" class="ccpMainLiInput" type="text" placeholder-class="inputplace" placeholder="请输入新密码" value="" />
					<input v-else v-model="newPassword" class="ccpMainLiInput" type="password" placeholder-class="inputplace" placeholder="请输入新密码" value="" />
					<view class="ccpMainLiRight" @click="cli_look_new">
						<image v-if="type_new == 'password'" class="ccpMainLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/login-4.png" mode=""></image>
						<image v-else class="ccpMainLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/login-3.png" mode=""></image>
					</view>
				</view>
				
			</view>
			<view class="ccpMainLi ccpMainLiThree">
				<view class="ccpMainLiTitle">
					确认新密码
				</view>
				<input v-if="type_newTwo == 'text'" v-model="newPasswordTwo" class="ccpMainLiInput" type="text" placeholder-class="inputplace" placeholder="请再次输入新密码" value="" />
				<input v-else v-model="newPasswordTwo" class="ccpMainLiInput" type="password" placeholder-class="inputplace" placeholder="请再次输入新密码" value="" />
				<view class="ccpMainLiRight" @click="cli_look_newtwo">
					<image v-if="type_newTwo == 'password'" class="ccpMainLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/login-4.png" mode=""></image>
					<image v-else class="ccpMainLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/login-3.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="font_blod">
			<view @click="cli_ok" class="ccpBtn ccpBtn-ok" v-if="btnOk">
				确定修改
			</view>
			<view @click="cli_false" class="ccpBtn" v-else>
				确定修改
			</view>
		</view>
		
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('id_factory'),
				oldPassword: '',
				newPassword: '',
				newPasswordTwo: '',
				type_old: 'password',
				type_new: 'password',
				type_newTwo: 'password',
			}
		},
		computed: {
			btnOk () {
				let val1 = this.oldPassword
				let val2 = this.newPassword
				let val3 = this.newPasswordTwo
				if (val1 && val2 && val3 && val2 == val3) {
					return true
				}else {
					return false
				}
				
			}
		},
		methods: {
			// 密码框显示隐藏
			cli_look_old () {
				let val = this.type_old
				if (val == 'password') {
					this.type_old = 'text'
				}else {
					this.type_old = 'password'
				}
			},
			cli_look_new () {
				let val = this.type_new
				if (val == 'password') {
					this.type_new = 'text'
				}else {
					this.type_new = 'password'
				}
			},
			cli_look_newtwo () {
				let val = this.type_newTwo
				if (val == 'password') {
					this.type_newTwo = 'text'
				}else {
					this.type_newTwo = 'password'
				}
			},
			// 点击确定按钮
			cli_false () {
				let val1 = this.oldPassword
				let val2 = this.newPassword
				let val3 = this.newPasswordTwo
				if (!val1) {
					uni.showToast({
						title : '请输入原密码',
						icon: 'none'
					})
				}else if (!val2) {
					uni.showToast({
						title : '请输入新密码',
						icon: 'none'
					})
				}else if (!val3) {
					uni.showToast({
						title : '请确认新密码',
						icon: 'none'
					})
				}else if (val2 != val3) {
					uni.showToast({
						title : '两次输入密码不一致',
						icon: 'none'
					})
				}
			},
			cli_ok () {
				this.updatePassword()
			},
			updatePassword () {
				uni.request({
					url: allapi.updateFactoryPassword,
					data: {
						factoryId: this.agentId,
						factoryPasswordOld: this.oldPassword,
						factoryPasswordNew: this.newPassword
					},
					success: (res) => {
						console.log(res);
						let code = res.data.code
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (code == 0) {
							uni.clearStorage();
							setTimeout( ()=> {
								uni.redirectTo({
									url: '/pages/manufacturers/login/login'
								})
							}, 500)
							
						}else {
							
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.ccp {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}
	.ccpMain {
		flex: 1;
	}
	.ccpMainLi {
		margin: 16rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		padding: 0rpx 32rpx;
		height: 96rpx;
	}
	.ccpMainLiNew {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.ccpMainLiThree {
		margin-top: 0;
	}
	.ccpMainLiTitle {
		width: 164rpx;
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
	}
	.ccpMainLiInput {
		flex: 1;
		font-size: 28rpx;
		font-weight: 400;
	}
	.ccpMainLiRight {
		padding: 20rpx;
	}
	.ccpMainLiRightImg {
		width: 36rpx;
		height: 36rpx;
	}
	.ccpBtn {
		height: 92rpx;
		background: #5DD4D6;
		border-radius: 46rpx;
		opacity: 0.5;
		margin: 40rpx;
		margin-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
		line-height: 92rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.ccpBtn-ok {
		opacity: 1;
	}
</style>
